<template>
  <el-dialog title="编辑角色" :visible.sync="compileDialogVisible" width="50%" @close="onClose">
    <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="addFormRoles">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="addForm.roleName"></el-input>
      </el-form-item>
      <el-form-item label="描述信息" prop="remark">
        <el-input type="textarea" v-model="addForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnDisabled"
            @click="handelConfirm"
          >确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
  import {compile, updateRole, addRole} from '../../api/role'

    export default {
        name: "RolesCompile",
        props: {
            //添加弹框的显示
            addDialogVisible: {
                type: Boolean,
                default: false
            },
            roleId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                compileDialogVisible: false,
                addForm: {
                    roleName: null,
                    remark: null
                }, //添加数据
                addFormRoles: {
                    roleName: [
                        {required: true, message: "请输入角色名称", trigger: "blur"},
                        {min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur"}
                    ],
                    remark: [
                        {required: true, message: "请输入角色描述信息", trigger: "blur"},
                        {min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur"}
                    ]
                }, //添加验证规则
                btnLoading: false,
                btnDisabled: false,
            }
        },
        //动态监听
        watch: {
            addDialogVisible(oldVal,newVal){
                this.compileDialogVisible = this.addDialogVisible
                if(this.roleId!=null){
                    this.getRole();
                }
            }
        },
        methods: {
            // 关闭窗口
            close() {
                this.$emit('update:visible', false)
                this.$emit('changeShow', 'false')
            },
            // 表单关闭
            onClose() {
                this.$refs['addFormRef'].resetFields()
                this.$emit('changeShow', 'false')
            },
            // 获取需要修改的信息
            async getRole(){
                const {data} = await compile(this.roleId)
                this.addForm = data.data.role;
                // console.log(data.data.role)
            },
            // 修改角色信息
            async updateRole(){
                const {data: res} = await updateRole(this.addForm);
                if(res.code == 200){
                    this.$notify.success({
                        title: '操作成功',
                        message: '角色信息修改成功'
                    })
                    this.closePopUp()
                }else {
                    return this.$message.error('角色信息修改'+res.message)
                }
            },
            // 新增角色信息
            async addRole(){
                const {data: res} = await addRole(this.addForm);
                if(res.code == 200){
                    this.$notify.success({
                        title: '操作成功',
                        message: '角色信息添加成功'
                    })
                    this.closePopUp()
                }else {
                    return this.$message.error('角色信息添加'+res.message)
                }
            },
            // 编辑后清除操作
            closePopUp(){
                this.addForm = {}
                this.$emit('changeShow', 'false')
            },
            // 提交
            handelConfirm() {
                this.$refs['addFormRef'].validate(valid => {
                    if (!valid) {
                        return
                    }
                    if(this.roleId == null){
                        this.addRole()
                    }else {
                        this.updateRole()
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
